<template>
  <!--<div id="notice">-->
    <span class="color-white">
      {{notice}}
    </span>
  <!--</div>-->
</template>

<script>
  export default{
    name:'notice',
    props:['num'],
    computed:{
      notice:function(){
        let num = this.num;
        if(this.num <= 99){
          return num;
        }
        return '99+'
      }
    }
  }
</script>

<style scoped lang="less">
  @import '../assets/css/variables.less';
  span{
    display: inline-block;
    width:28px;
    height:28px;
    text-align:center;
    line-height:28px;
    border-radius: 50%;
    background:@orange;
    font-size:40%;
    position: relative;
    top:-10px;
  }
</style>
